<script lang="ts" setup>
import HyBreadcrumb from '@/base-ui/breadcrumb';
import { useStore } from '@/store';
import { pathMapBreadcrumb } from '@/utils/map-menus';
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';

import UserInfo from './user-info.vue';

const isFold = ref(false);
const emits = defineEmits(['foldChange']);
const handleFoldClick = () => {
  isFold.value = !isFold.value;
  emits('foldChange', isFold.value);
};
const store = useStore();
const route = useRoute();

const breadcrumbs = computed(() => {
  const userMenus = store.state.login.userMenus;
  const currentPath = route.path;
  return pathMapBreadcrumb(userMenus, currentPath);
});
</script>
<template>
  <div class="nav-header">
    <el-icon v-show="!isFold" @click="handleFoldClick"><ArrowLeft /> </el-icon>
    <el-icon v-show="isFold" @click="handleFoldClick"><ArrowRight /></el-icon>
    <div class="content">
      <hy-breadcrumb :breadcrumbs="breadcrumbs" />
      <user-info />
    </div>
  </div>
</template>
<style lang="less" scoped>
.nav-header {
  display: flex;
  width: 100%;
  .fold-menu {
    font-size: 30px;
    cursor: pointer;
  }
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 20px;
  }
}
</style>
